<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<fieldset>
<legend>王总: 程旭元你好, 帮我做一个文件上传的功能吧?</legend>
<!-- 
网页中 / 开头的地址 ： /upload.s
http://localhost:8080/upload.s  ==> 404
 结论： 网页中 地址开头/表示是 服务器根目录
 
Servlet中 / 开头的地址 ： /upload.s
http://localhost:8080/C94-S2-Ply-servlet/upload.s
结论：Servlet中 地址开头/表示是 项目根目录

	严重: 在路径为/C94-S2-Ply-servlet的上下文中，
	Servlet[com.yc.demo.demo.UploadServlet]的Servlet.service（）
	引发了具有根本原因的异常org.apache.tomcat.util.http.fileupload.impl.InvalidContentTypeException: 
	
	the request doesn't contain a multipart/form-data or multipart/mixed stream, 
	content type header is application/x-www-form-urlencoded


 -->
<form action="/C94-S2-Ply-servlet/upload.s" method="post"
	enctype="multipart/form-data">
	文件: <input type="file" name="file"><br>
	<button>表单提交</button>
</form>
</fieldset>

<fieldset>
<legend>王总: 旭元呀, 你的上传功能每次只能上传一个文件, 太麻烦, 能一次传多个文件吗?</legend>
<form>
	文件: <input type="file" name="file" multiple="multiple"><br>
	文件: <input type="file" name="file" multiple="multiple"><br>
	文件: <input type="file" name="file" multiple="multiple"><br>
	<button>表单提交</button>
</form>
</fieldset>

<fieldset>
<legend>王总: 旭元呀, 每次上传完成, 总是跳到一个白页面显示信息, 能不能不跳转? </legend>
<form>
	文件: <input id="file1" type="file" name="file" multiple="multiple"><br>
	文件: <input id="file1" type="file" name="file" multiple="multiple"><br>
	文件: <input id="file1" type="file" name="file" multiple="multiple"><br>
	<button type="button" onclick="upload1()">AJAX提交</button>
</form>
</fieldset>

<fieldset>
<legend>王总: 旭元呀, 我想让会员可以上传自己的头像, 有没有法子呀? </legend>
<form id="ff">
	<img id="head" alt="上传头像" src="../../_images/头像.jpg" height="200px" id=head><br>
	文件: <input id="file1" type="file" name="file"><br>
	<button type="button" onclick="upload2()">上传头像</button>
</form>
</fieldset>
<script type="text/javascript" src="../ajax.js"></script>

<script type="text/javascript">
	function upload2(){
		let url = "/C94-S2-Ply-servlet/upload.s";
		// FormData 构建时传入 表单 dom 对象
		let param = new FormData(ff);
		post(url, param, function(json){
			obj = JSON.parse(json);
			alert(obj.msg);
			head.src = "/C94-S2-Ply-servlet" + obj.path;
		})
	}
</script>
















</body>
</html>